<template>
  <div>
    <div class="title">-错题解析-</div>
    <list-item v-for=" v in WrongData" :key="v.id" :item='v' />
    <div class="btn" @click="Reset">
      <span>首页</span>
    </div>
  </div>
</template>
<script>
import { onMounted, ref } from 'vue'
import { useStore } from 'vuex'
import { getWrongData } from '@/libs/utils.js'
import ListItem from './Item.vue'
import { useRouter } from 'vue-router'
export default {
  name: 'wrongList',
  components: {
    ListItem
  },
  setup() {
    const store = useStore()
    const WrongData = ref([])
    const router = useRouter()
    const Reset = () => {
      store.commit('resetPosition')
      router.push('/')
    }
    onMounted(() => {
      WrongData.value = getWrongData(store.state.MyAuswer)
    })
    return {
      WrongData,
      router,
      Reset
    }
  }
}
</script>
<style lang="less" scoped>
.title {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  text-align: center;
}
.btn {
  margin-top: 10px;
  text-align: center;
  color: #fff;
  margin-bottom: 70px;
  font-size: 18px;
  span {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 10px;
    background-color: #337ab7;
  }
}
</style>
